<!DOCTYPE html>
<html>
<head>
	<link href="../demoengine/demoengine.min.css" rel="stylesheet">
	<script src="../demoengine/demoengine.min.js" defer></script>
	<title>jQuery UI Dialog: Open Dialog on Click</title>
	<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
	<div id="dialog" title="Dialog">
		<p>This dialog was created on document ready event with <code>autoOpen</code> set to <code>false</code>.</p>
		<p>It was opened by calling <code>.dialog(&quot;open&quot;)</code> method.</p>
	</div>
	<input type="button" id="button" value="Click to open the dialog">
	<script>
		/*
		 * jQuery UI Dialog: Open Dialog on Click
		 * http://salman-w.blogspot.com/2013/05/jquery-ui-dialog-examples.html
		 */
		$(function() {
			$("#dialog").dialog({
				autoOpen: false
			});
			$("#button").on("click", function() {
				$("#dialog").dialog("open");
			});
		});
	</script>
</body>
</html>
